<template>
  <div>
    <!-- 用户管理首页 -->
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-row :gutter="20" class="topLayout" type="flex" justify="start">
          <div class="inline" :span="6">
            <span>用户状态</span>
            <div class="flexBox">
              <div
                @click="changeSearchState(item.value)"
                v-for="item in stateList"
                :key="item.name"
                :class="searchForm.state == item.value ? 'selected' : ''"
              >{{ item.name }}</div>
            </div>
          </div>
          <div class="inline" :span="8">
            <el-input v-model="searchForm.search" placeholder="请输入关键字搜索" clearable class="input-search" />
            <el-button type="primary" @click="getList(true)" icon="el-icon-search">搜 索</el-button>
          </div>
        </el-row>
      </div>
    </el-card>
    <el-card class="m-t m-b">
      <div>
        <!-- 操作按钮 -->
        <el-row type="flex" justify="start" class="m-b">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addUser">添加用户</el-button>
        </el-row>
        <el-table stripe :data="tableData" style="width: 100%" size="small">
          <!--<el-table-column type="selection" width="55" />-->
          <el-table-column type="index" label="编号" min-width="60" align="center" :index="table_index"></el-table-column>
          <el-table-column prop="name" label="用户名" min-width="140"/>
          <el-table-column prop="displayName" label="用户昵称" min-width="140"/>
          <el-table-column prop="phone" label="手机号" min-width="140"/>
          <el-table-column prop="company" label="单位" min-width="140"/>
          <el-table-column prop="email" label="邮箱" min-width="200" show-overflow-tooltip/>
          <el-table-column prop="state" label="状态" min-width="140">
            <template #default="{ row }">
              <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
            </template>
          </el-table-column>
          <!--<el-table-column prop="description" label="描述" width="180" />-->
          <el-table-column prop="createTime" label="创建时间" min-width="140" :formatter="dateFormat" />
          <el-table-column label="操作" width="170" fixed="right">
            <template #default="{ row }">
              <!--<el-tag type="primary" @click="device(row)" title="分配设备">
                <i class="el-icon-tickets"></i>
              </el-tag>-->
              <el-tag type="warning" @click="activeUser(row)" title="激活用户">
                <i class="el-icon-s-custom"></i>
              </el-tag>
              <el-tag type="primary" @click="diviceData(row)" title="查看设备">
                <i class="el-icon-view"></i>
              </el-tag>
              <el-tag type="danger" @click="deleteUser(row)" title="删除用户">
                <i class="el-icon-delete"></i>
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="pages-btn-box m-t">
          <el-pagination
            :current-page="page.current"
            :page-size="Number(page.size)"
            layout="prev, pager, next, jumper"
            :total="Number(page.total)"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <edit-form
      :show-dialog="showDialog"
      :form-data="formData"
      @changeVisible="changeVisible"
      @getList="getList"
    ></edit-form>
    <device-form
      :show-dialog="deviceDialog"
      :userName="userName"
      @deviceVisible="deviceVisible"
      @getList="getList"
    />
  </div>
</template>

<script>
import { formatDate } from "@/utils/utils";
import { search, active, deleteUser } from "@/api/userManage";
import editForm from "./components/editForm";
import deviceForm from "./components/deviceForm";
export default {
  name: "Index",
  components: {
    editForm,
    deviceForm
  },
  data() {
    return {
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 1
      },
      formData: {},
      userName: "",
      showDialog: false,
      deviceDialog: false,
      searchForm: {
        state: "",
        search: ""
      },
      stateList: [
        { value: "NEW", name: "新注册" },
        { value: "ACTIVE", name: "激活" },
        { value: "DISABLE", name: "禁用" }
      ]
    };
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "NEW":
          return "新注册";
        case "ACTIVE":
          return "激活";
        case "DISABLE":
          return "禁用";
        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ACTIVE: "success",
        DISABLE: "danger",
        NEW: ""
      };
      return stateMap[state];
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    table_index(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    dateFormat(row, column) {
      if (column.property === "createTime") {
        return formatDate(new Date(row.createTime));
      } else if (column.property === "updateTime") {
        return formatDate(new Date(row.updateTime));
      }
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    getList(refresh = false) {
      var data = {
        ...this.searchForm,
        pageNo: this.page.current,
        pageSize: this.page.size
      };

      if (refresh) {
        data.pageNo = 1;
      }
      search(data).then(res => {
        const data = res.value;
        this.tableData = data.values;
        this.page.total = data.total;
      });
    },
    addUser() {
      this.formData = {};
      this.changeVisible(true);
    },
    device(row) {
      this.userName = row.name;
      this.deviceVisible(true);
    },
    activeUser(row) {
      this.$confirm("您确定要激活此用户吗？", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        let data = {
          userName: row.name
        };
        active(data).then(res => {
          if (res["code"] == 200) {
            this.$message("激活成功!");
            this.getList();
          }
        });
      });
    },
    diviceData(row) {
      this.$router.push({
        path: "/userManage/device",
        query: {
          userId: row.userId,
          page: this.page.current,
          search: JSON.stringify(this.searchForm)
        }
      });
    },
    deleteUser(row) {
      this.$confirm("您确定要删除此用户吗？删除后不可恢复，请谨慎操作！", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        const data = {
          userName: row.name
        };
        deleteUser(data)
          .then((res) => {
            if (res["code"] == 200) {
              this.getList();
              this.$message.success("删除成功!");
            } else {
              this.$message(res["msg"]);
            }
          })
      });
    },
    viewData(row) {
      console.log(row);
      if (row.type === "IEQ") {
        this.$router.push({ path: "/deviceManage/IEQViewData", query: row });
      } else if (row.type === "OPT") {
        this.$router.push({ path: "/deviceManage/OPTViewData", query: row });
      } else if (row.type === "PMS") {
        this.$router.push({ path: "/deviceManage/PMSViewData", query: row });
      }
    },
    changeSearchState(value) {
      if (this.searchForm.state == value) {
        this.searchForm.state = "";
      } else {
        this.searchForm.state = value;
      }
      this.getList();
    },
    changeVisible(e) {
      this.showDialog = e;
    },
    deviceVisible(e) {
      this.deviceDialog = e;
    }
  }
};
</script>

<style scoped lang="scss">
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.inline {
  // max-width: 300px;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.input-search {
  margin-right: 20px;
}

.el-tag{
  margin-left: 15px;
}

.flexBox {
  display: flex;
  div {
    margin: 0 5px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
  }
  .selected {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
<style>
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }
</style>
